*{margin: 0px;
  padding: 0px;	
}
body{
	display: flex;
	justify-content: center;
	align-items: center;
	
	height: 100vh;
	perspective: 800px;
}
section{
	position: relative;
	transform-style: preserve-3d;
	width: 150px;
	height: 150px;
	
	animation: er  3s  linear  infinite;
	
}
section div{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 150px;
	width: 150px;
	transition: all 3s;
}
section  div img{
	width: 100%;
	height: 100%;
	
}
section  div:nth-child(1){
	transform: translateZ(75px);
}
section:hover  div:nth-child(1){
	transform: translateZ(200px);
}
section  div:nth-child(2){
	transform: rotateY(-180deg)translateZ(75px);
}
section:hover  div:nth-child(2){
	transform: rotateY(-180deg)translateZ(200px);
}
section  div:nth-child(3){
	transform: rotateX(90deg)translateZ(75px);
}
section:hover  div:nth-child(3){
	transform: rotateX(90deg)translateZ(200px);
}
section  div:nth-child(4){
	transform: rotateX(-90deg)translateZ(75px);
}
section:hover  div:nth-child(4){
	transform: rotateX(-90deg)translateZ(200px);
}
section  div:nth-child(5){
	transform: rotateY(90deg)translateZ(75px);
}
section:hover  div:nth-child(5){
	transform: rotateY(90deg)translateZ(200px);
}
section  div:nth-child(6){
	transform: rotateY(-90deg)translateZ(75px);
}
section:hover  div:nth-child(6){
	transform: rotateY(-90deg)translateZ(200px);
}
section  div:nth-child(7){
	transform: translateZ(75px);
}
section  div:nth-child(8){
	transform: rotateX(-180deg)translateZ(75px);
}
section  div:nth-child(9){
	transform: rotateX(90deg)translateZ(75px);
}
section  div:nth-child(10){
	transform: rotateX(-90deg)translateZ(75px);
}
section  div:nth-child(11){
	transform: rotateY(90deg)translateZ(75px);
}
section  div:nth-child(12){
	transform: rotateY(-90deg)translateZ(75px);
}
@keyframes er{
	from{transform:rotateY(0) rotateX(0);}
	to{transform: rotateY(360deg)rotateX(360deg);
		
	}
}
